<template>
	<div class="home">
		<el-card class="box-card center">
			<div width="580px">
				<el-form ref="form" status-icon :model="form" :rules="rules" label-width="80px">
					<el-row type="flex" class="row-bg" justify="space-between">
						<el-col :span="6">
							<el-select v-model="form.engine" placeholder="请选择翻译引擎">
								<el-option label="谷歌翻译" value="Google"></el-option>
								<el-option label="有道翻译" value="Youdao"></el-option>
								<el-option label="百度翻译" value="Baidu"></el-option>
							</el-select>
						</el-col>
						<el-col :span="6">
							<el-select v-model="form.original" placeholder="请选择原语言">
								<el-option label="中文" value="ZH"></el-option>
								<el-option label="英文" value="EN"></el-option>
							</el-select>
						</el-col>
						<el-col :span="7">
							<el-select v-model="form.target" placeholder="请选择目标语言">
								<el-option label="中文" value="ZH"></el-option>
								<el-option label="英文" value="EN"></el-option>
							</el-select>
						</el-col>
					</el-row>
					<div style="margin: 20px 0;"></div>
					<div style=" margin: 0 auto">
						<el-form-item prop="originalenglish">

							<el-input type="textarea" v-model="form.originalenglish" placeholder="输入翻译"
												:rows="8" @input="handleInput" ></el-input>
						</el-form-item>
						<div style="margin: 20px 0;"></div>
						<el-form-item prop="targetenglish">

							<el-input type="textarea" v-model="form.targetenglish" placeholder="输出翻译" :rows="8"></el-input>
						</el-form-item>
					</div>
					<div style="margin: 10px 0;"></div>

					<div style="float:right">
						<div>
							<el-form-item prop="score">
								<el-input v-model="form.score" placeholder="请输入评分" width="50px"></el-input>
							</el-form-item>
							<div style="margin: 10px 0;"></div>

							<div>
								<el-button type="success" size="medium" @click="submit">翻译</el-button>
								<el-button type="success" size="medium" @click="openList">导出</el-button>

								<el-button type="primary" size="medium" @click="submitForm('form')">提交</el-button>
							</div>
						</div>
					</div>
				</el-form>
				<trans-record v-if="transRecordVisible" ref="transRecord"></trans-record>
			</div>
		</el-card>
	</div>
</template>

<script>
	import TransRecord from "./transrecord";

	export default {
		name: "Home",
		components: {
			TransRecord
		},
		data() {
			var checkScore = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('分数不能为空'));
				}
				setTimeout(() => {
					let numRe = new RegExp('^[-\\+]?([0-9]+\\.?)?[0-9]+$')
					if (!numRe.test(value)) {
						callback(new Error('请输入数字值'));
					} else {

						if (!(value <= 100 && value >= 0)) {
							callback(new Error('评分是0~100分哦！'));
						} else {
							callback();
						}
					}
				}, 500);
			};
			return {
				transRecordVisible: false,
				input: "",
				form: {
					engine: "Baidu",
					original: "ZH",
					target: "EN",
					originalenglish: "",
					targetenglish: "",
					score: ''
				},
				TimeId: -1,
				rules: {
					score: [
						{validator: checkScore, trigger: 'blur'}
					],
					originalenglish: [
						{required: true, message: '请输入翻译', trigger: 'change'}
					],
					targetenglish: [
						{required: true, message: '输出翻译不能为空', trigger: 'change'}
					],
				}
			};

		},
		methods: {
			//打开导出列表
			openList() {
				this.transRecordVisible = true
				this.$nextTick(() => {
					this.$refs.transRecord.getDataList()
				})
			},
			// 翻译
			trans() {
				this.$http.post("/trans/word", {
					engine: this.form.engine,
					original: this.form.original,
					target: this.form.target,
					originalenglish: this.form.originalenglish,
				}).then(({data}) => {
					if (data.code === 200) {
						this.form.targetenglish = data.trans[0].replace(/^\"|\"$/g, '')//去除str 前后的双引号
					} else if (data.code === 2000) {
						this.$message({
							message: data.msg,
							type: 'warning'
						});
					}
				})
			},
			submit(){
				this.trans()
			},
			handleInput() {
				clearTimeout(this.TimeId)
				this.TimeId = setTimeout(() => {
					this.trans() // 定时器生效时执行的方法
				}, 1000)
				// console.log('分数：', this.score)
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// alert('submit!');
						this.score()
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 评分
			score() {
				this.$http.post("/trans/save", {
					engine: this.form.engine,
					original: this.form.original,
					target: this.form.target,
					targetenglish: this.form.targetenglish,
					originalenglish: this.form.originalenglish,
					score: this.form.score
				}).then(({data}) => {
					if (data.code === 200) {
						this.$message({
							message: data.msg,
							type: 'success'
						});
						this.form.score = ''
					} else if (data.code === 2000) {
						this.$message({
							message: data.msg,
							type: 'warning'
						});
					}
				})
			},
		},
	};
</script>
<style>
	.text {
		font-size: 14px;
	}

	.item {
		padding: 30px 0;
	}

	.box-card {
		width: 650px;
	}

	.center {
		/* width: 100px; */
		/* height: 460px; */
		margin: 0 auto;
	}
</style>
